<template>
  <div class="purchase_view">
    <!-- 添加或修改申请采购明细对话框 -->
    <el-button class="active" type="text" @click="handleAdd" >新增明细</el-button>
    <el-dialog :visible.sync="open" :title="title" width="650px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin-top: -20px">
        <el-form-item label="申购老师" prop="applyTeacher">
          {{form.applyTeacher}}
        </el-form-item>
        <el-row>
            <el-form-item label="危化品名称" prop="materialName">
             <el-autocomplete class="input_l"  v-model="form.materialName"
               :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入危化品名称" @select="handleChoose"
              ></el-autocomplete>
            </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="Cas号" prop="casNo">
            <el-input v-model="form.casNo" placeholder="请输入Cas号" size="small" class="input_w" disabled/>
          </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类别" prop="hazardousOpt">
              <el-select v-model="form.hazardousOpt" placeholder="自动带入" class="input_w" disabled size="small">
                <el-option v-for="item in kindsOptions" :key="item.kindsId" :label="item.name" :value="item.kindsId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="数量" prop="quantity">
              <el-input v-model="form.quantity" type="number" placeholder="请输入数量" class="input_w" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="unitOpt">
              <el-select v-model="form.unitOpt" placeholder="请选择单位" class="input_w" size="small">
                <el-option v-for="dict in unitOptOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="parseInt(dict.dictValue)" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="采购厂家" prop="recommendedManufacturer">
              <el-input v-model="form.recommendedManufacturer" placeholder="请输入采购厂家" class="input_w" size="small"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货号" prop="orderCode">
              <el-input v-model="form.orderCode" placeholder="请输入货号" class="input_w" size="small"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" rows="3" placeholder="备注" class="input_l"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-hasPermi="['labdata:casInventory:edit']">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getCasTypeByNo,listCasType
  } from "@/api/labdata/casType";
  import {
    searchEmployee
  } from "@/api/labdata/employee";
  import {
    addCas,
    updateCas,
  } from "@/api/labdanger/purchaseDet.js";
  export default {
    name: "TeacherDialog",
    data() {
      return {
        title:'',
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        allInfos:[],
        open: false,
        // 表单参数
        form: {},
        //kindsOptions: [],
        //unitOptOptions: [],
        // 表单校验
        rules: {
          instanceId: [{
            required: true,
            message: "申请采购ID不能为空",
            trigger: "blur"
          }],
          casNo: [{
            required: true,
            message: "Cas号不能为空",
            trigger: "blur"
          }],
          materialName: [{
            required: true,
            message: "危化品名称不能为空",
            trigger: "blur"
          }],
         /* hazardousOpt: [{
            required: true,
            message: "类别不能为空",
            trigger: "blur"
          }], */
          unitOpt: [{
            required: true,
            message: "单位不能为空",
            trigger: "change"
          }],
          quantity: [{
            required: true,
            message: "购置数量不能为空",
            trigger: "blur"
          }],
        },
        //hazardousOptOptions: [],
      };
    },
    props: {
      instanceId: Number,
      kindsOptions: Array,
      unitOptOptions: Array,
    },
    created() {
      /* this.getDicts("hazardousOpt").then(response => {
         this.hazardousOptOptions = response.data;
       }); */
     /* this.getAllKinds();
      this.getDicts("unitOpt").then(response => {
        this.unitOptOptions = response.data;
      }); */
      //console.log('instanceId='+this.$props.instanceId);
    },
    methods: {
      searchUser() {
        if (!this.form.applyTeacher) {
          this.form.applyTeacherName = null;
          return;
        }
        searchEmployee(this.form.applyTeacher).then(response => {
          let searchResult = response.data;
          if (searchResult) {
            this.form.applyTeacherName = searchResult.nickName;
          } else {
            this.form.applyTeacherName = null;
          }
          //强制刷新
          this.$forceUpdate();
        });
      },
      searchCasType() {
        if (!this.form.casNo) {
          this.form.materialName = null;
          this.form.hazardousOpt = null;
          return;
        }
        getCasTypeByNo(this.form.casNo).then(response => {
          let searchResult = response.data;
          if (searchResult) {
            this.form.materialName = searchResult.name;
            this.form.hazardousOpt = searchResult.typeOpt;
          } else {
            this.form.materialName = null;
            this.form.hazardousOpt = null;
          }
          //强制刷新
          this.$forceUpdate();
        });
      },
      //输入框获取焦点时调用的方法
      querySearch(queryString, cb) {
        listCasType({name: queryString, pageSize:10, pageNum:1}).then(response => {
          this.allInfos = response.rows;
          let results = this.allInfos.map((item) => {
            return {
              value: item.name,
              name: item.id,
            };
          });
          //cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表
          cb(results);
        });
      },
      handleChoose(item) {
        //console.log(JSON.stringify(item));
        this.form.materialName = item.value;
        this.form.casNo = null;
        this.form.hazardousOpt = null;
        for (let i = 0; i < this.allInfos.length; i++) {
          if (this.allInfos[i].id == item.name) {
            this.form.casNo = this.allInfos[i].casNo;
            this.form.hazardousOpt = this.allInfos[i].typeOpt;
            break;
          }
        }
        this.$forceUpdate();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.form.instanceId = this.$props.instanceId;
        this.form.applyTeacher = this.$store.state.user.name;
        //this.searchUser();
        this.title='新建老师申购';
        this.open = true;
      },
      updateDetail(item){
        this.reset();
        this.form = item;
        this.title = '编辑老师申购';
        this.open = true;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
        this.open = false
      },
      submitForm() {
         this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.purchaseDetailId != null) {
              updateCas(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.$emit("list");
              });
            } else {
              addCas(this.form).then(response => {
                this.msgSuccess("新增成功");
                console.log('call list');
                this.open = false;
                this.$emit("list");
              });
            }
          }
        });
      }
    }
  };
</script>

<style scoped lang="scss">
 /deep/ .el-button.active {
    text-decoration: underline;
    color: #0000ee;
    margin-left: 15px;
  }
  .input_w{
    width: 200px;
  }
  .input_l{
    width: 510px;
  }

  .dialog-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
</style>
